<template>
    <div>
        <div class="ui-title">
            <div class="ui-title-back" @click="hideWindow"></div>
            <div class="ui-title-text">{{title}}</div>
            <div class="ui-title-btn-block">
                <span class="ui-title-btn2 " @click="showDir">目录</span>
            </div>
        </div>
        <div class="body">
             <div class="book-detail" id="bookdetail" ref="bookdetail"></div>
             <div class="book-tools xzr xzr-ico-jindutiao">{{progress}}%</div>
        </div>

        <div class="book-dir" ref="dir" @click="hideDir">
            <div class="book-dir-block">
                <div class="book-dir-title">目录</div>
                <ul class="book-dir-list">
                    <li class="book-dir-li" v-if="dirlist.length<1">暂无</li>
                    <li class="book-dir-li" v-for="v in dirlist" @click="gototop(v.index)">{{v.title}}</li>
                </ul>
            </div>
        </div>
    </div>

</template>

<script>
    var fors;
    export default {
        data: function () {
            return {
                id:'',
                booklist:[],
                title:"",
                dirlist:[
                    //{title:'目录一',top:100}
                ],
                bookTopPosition:{},
                progress:0,
                focus:false,//是否当前窗口是活动窗口
            }
        },
        methods: {
            gototop:function(index){
                this.$refs.dir.className='book-dir';
                document.getElementById('bookdetail').scrollTop=document.querySelectorAll('.cne-books-title')[index].offsetTop;
            },
            showDir:function(){
                this.$refs.dir.className='book-dir on';
            },
            hideDir:function(event){
                if(event.currentTarget==event.target){
                    this.$refs.dir.className='book-dir';
                }
            },
            hideWindow:function(){
               // document.getElementById('bookdetail').innerHTML='<div style="margin:5vw 0;text-align: center" class="xzr xzr-ico-unie60e">正在加载...</div>';
                this.dirlist=[];
                this.title='正在加载';
                window.hideWebview();
            },

            init:function(){
                clearInterval(fors);
                this.focus=false;
                var data=HASH,self=this;
                var contentBox=document.getElementById('bookdetail');
                contentBox.innerHTML='<div style="margin:5vw 0;text-align: center" id="tips" class="xzr xzr-ico-unie60e book-detail-icon">正在加载...</div>';
                self.title=data.title;
                self.progress=0;
                self.id=data.id;
                self.dirlist=[];

                var filename=data.path.split('/');
                var path=plus.io.convertLocalFileSystemURL('_doc')+"book/";
                filename=filename[filename.length-1];

                plus.io.resolveLocalFileSystemURL( path+filename, function() {
                    setTimeout(function(){
                        self.showbook(path+filename,data);
                    },200);
                }, function ( e ) {
                    var netstate=plus.networkinfo.getCurrentType()==plus.networkinfo.CONNECTION_NONE?false:true;
                    if(netstate){
                        var  dtask = plus.downloader.createDownload(data.path,{filename:path},function (d,status){
                            if (status != 200){
                                document.getElementById('bookdetail').innerHTML='<div style="margin:5vw 0;text-align: center" id="tips" class="xzr xzr-ico-ku book-detail-icon">电子书下载失败</div>';
                            }else{
                                self.showbook(path+filename,data);
                            }
                        });
                        dtask.start();//开始下载
                    }else{
                        document.getElementById('bookdetail').innerHTML='<div style="margin:5vw 0;text-align: center" id="tips" class="xzr xzr-ico-ku book-detail-icon">网络未连接</div>';
                    }
                });
            },

            showbook:function(path,data){
                var self=this;
                var contentBox=document.getElementById('bookdetail');
                plus.io.resolveLocalFileSystemURL(path,function(fs){
                    fs.file(function (file) {
                        var reader = new plus.io.FileReader();
                        reader.onload = function ( e ) {
                            var res=e.target.result;
                            contentBox.innerHTML=res;

                            //初始化上次浏览位置
                            if(self.bookTopPosition[data.id]!=undefined){
                                setTimeout(function () {
                                    document.getElementById('bookdetail').scrollTop=self.bookTopPosition[data.id];
                                    plus.nativeUI.toast('已为您跳转到上次阅读位置');
                                    self.focus=true;
                                },200)
                            }else{
                                self.focus=true;
                            }

                            //生成目录
                            var title=document.querySelectorAll('.cne-books-title'),list=[];
                            for(var i=0;i<title.length;i++){
                              list.push({
                                  title:title[i].innerText,
                                  index:i
                              })
                            }
                            self.dirlist=list;
                            //bookinit(contentBox);

                            //加入已查看
                            var looked=plus.storage.getItem('looked');
                            var history=JSON.parse(looked?looked:"[]"),tmp=[data.id];
                            for(var i=0;i<9;i++){
                              if(history[i] && history[i]!=data.id)tmp.push(history[i]);
                            }
                            plus.storage.setItem('looked',JSON.stringify(tmp));
                        };
                       /* reader.onprogress=function(res){
                            document.getElementById('tips').innerHTML=res;
                        }*/
                        reader.readAsText( file );//开始读取
                    })
                });
            }
        },

        mounted: function () {
            var toparr=plus.storage.getItem('bookTopPosition'),self=this;
            if(toparr){
                this.bookTopPosition=JSON.parse(toparr);
            }
            this.init();
            this.$refs.bookdetail.onscroll=function () {
                clearTimeout(fors);
                if(!self.focus)return;
                self.progress=((document.getElementById('bookdetail').scrollTop==0?0:document.getElementById('bookdetail').scrollTop+document.getElementById('bookdetail').offsetHeight)/document.getElementById('bookdetail').scrollHeight*100).toFixed(2);
                fors=setTimeout(function () {
                    setscroll(self)
                },300);
            }
        }
    }

    function setscroll(self){
            if (self.id) {
                var t=document.getElementById('bookdetail').scrollTop;
                self.bookTopPosition[self.id] = t;
                plus.storage.setItem('bookTopPosition', JSON.stringify(self.bookTopPosition));
            }
    }

    /*function bookinit (el) {
        var obj = document.createElement('div'),oldmousex,index=0,maxIndex=0;
        var width=el.offsetWidth;
        var height=el.offsetHeight,cssStr='';
        el.style.overflow = "hidden";
        el.style.width = width + "px";
        cssStr+= "height:" +height+ "px;width:"+width+"px;column-width:"+width+"px;-webkit-column-width:"+width+'px;display:none;display: inline-block;word-break: break-all; text-align: justify; user-select: none;';
        cssStr+="column-gap:0;-webkit-column-gap:0;transition:0.2s all ease;-webkit-transition:0.2s all ease;transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);";
        obj.style.cssText = cssStr;
        obj.className = 'pub-book';
        obj.innerHTML = el.innerHTML;
        el.innerHTML="";
        el.appendChild(obj);


        el.ontouchstart=el.onmousedown=function (event) {
            event=event||window.event;
            if(event.changedTouches)event=event.changedTouches[0];
            oldmousex=event.clientX;
        }

        el.ontouchend=el.onmouseup=function (event) {
            event=event||window.event;
            if(event.changedTouches)event=event.changedTouches[0];
            if(oldmousex<event.clientX){
                if(index>0){
                    index--;
                }else {
                    return;
                }
            }else if(oldmousex>event.clientX){
                if(maxIndex>index+1){
                    index++;
                }else{
                    return;
                }
            }
            obj.style.webkitTransform=obj.style.transform = "translate3d(-"+(index*width)+"px,0,0)";
        }

        setTimeout(function () {
            obj.style.display='block';
            maxIndex=el.scrollWidth/width;
        },500);
    }
*/


</script>

